import React, { useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom'
import request, { baseUrl } from '../../../utils/request';
import {
    Form,
    Input,
    Button,
    Radio,
    Select,
    Space,
    Rate,
    Divider,
} from 'antd';
const { TextArea } = Input;
import { PlusOutlined, MinusCircleOutlined, PaperClipOutlined } from '@ant-design/icons';
import { connect } from 'react-redux'


function Add(props) {
    const navigate = useNavigate()
    const username = props.user.username





    const submit = async (values) => {
        const { data } = await request.post('/iq', {
            username,
            values
        })
        console.log('添加的数据', data);
        if (data.status === 200) {
            // console.log(11111111);
            navigate('/manage/question/list')

        }
    }

    return (
        <>
            <Form
                layout="vertical"
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 14,
                }}
                // initialValues={category}
                onFinish={submit}
            // layout="horizontal"
            // onValuesChange={onFormLayoutChange}
            // disabled={componentDisabled}
            >

                {/* 单选框 */}
                <Form.Item label="">
                    <Radio.Group>
                        <Radio value="apple"> 批量添加 </Radio>
                        <Radio value="pear"> 普通添加 </Radio>
                    </Radio.Group>
                </Form.Item>
                {/* 添加公司 */}
                <Form.List name="users">
                    {(fields, { add, remove }) => (
                        <>
                            {fields.map(({ key, name, ...restField }) => (
                                <Space
                                    key={key}
                                    style={{
                                        display: 'flex',
                                        marginBottom: 8,
                                    }}
                                    align="baseline"
                                >
                                    <Form.Item className='Company_input_item'
                                        {...restField}
                                        name={[name, 'first']}
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入公司名',
                                            },
                                        ]}
                                    >
                                        <Input placeholder="输入公司名" />
                                    </Form.Item>
                                    <MinusCircleOutlined className='Company_input_item_icon' onClick={() => remove(name)} />
                                </Space>
                            ))}
                            <Form.Item className='Company_input' name='company'>
                                <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                    添加公司
                                </Button>
                            </Form.Item>
                        </>
                    )}
                </Form.List>
                {/* 面试题目 */}
                <Form.Item
                    // labelCol={{
                    //     flex: '80px',
                    // }}
                    // labelAlign="left"
                    // labelWrap

                    wrapperCol={{
                        flex: 1,
                    }}
                    colon={false}
                    label="面试题目"
                    name="question"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input placeholder="请输入面试题的题目" />
                </Form.Item>

                {/* 分类 */}
                <Form.Item className='category_select' label="分类" name="category" >
                    <Select placeholder="请选择分类">
                        {/* {
                            category.map(item => (
                                <Select.Option key={item._id} value={item.name}>{item.name}</Select.Option>
                            ))
                        } */}
                    </Select>
                </Form.Item>

                {/* 难度 */}
                <Form.Item label="难度">
                    <Rate allowHalf defaultValue={2.5} />
                </Form.Item>

                {/* 添加标签 */}

                {/* 热门标签 */}
                <Form.Item wrapperCol={{
                    flex: 1,
                }}>
                    <Divider dashed orientation="left">热门 tags</Divider>
                    <Space>
                        {<Button type="dashed" >111</Button>}
                    </Space>
                </Form.Item>

                {/* 问题补充 */}
                <Form.Item label="问题补充（选填）">
                    <TextArea
                        showCount
                        maxLength={1000}
                        style={{
                            height: 120,
                        }}
                        placeholder="请输入内容"
                    />
                </Form.Item>
                {/* 提交按钮 */}
                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item>
            </Form>
        </>
    )
}



// 映射Redux状态到组件的props
const mapStateToProps = function (state) {
    return {
        user: state.userInfo
    }
}


Add = connect(mapStateToProps)(Add)

export default Add;